<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hearder {
            height: 400px;
            width: 300px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 19px 10px 5px rgba(0, 0, 0, .5);
            position: relative;
        }
        
        i {
            position: absolute;
            font-size: 60px;
            top: 38%;
            left: 38%;
        }
        
        .body {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, .8);
        }
        
        video {
            display: none;
            position: absolute;
            bottom: 20%;
            right: 25%;
        }
        
        .playqe {
            display: none;
            position: absolute;
            bottom: 15%;
            left: 25%;
        }
        
        .query {
            display: none;
            position: absolute;
            bottom: -135%;
            left: 36%;
            background-color: #fff;
            height: 30px;
            line-height: 30px;
            width: 230px;
            text-align: center;
        }
        
        .query span {
            cursor: pointer
        }
        
        .div1 {
            width: 300px;
            height: 20px;
            border-radius: 10px;
            background: #aaa;
            position: relative;
        }
        
        .box1 {
            width: 60px;
            height: 20px;
            border-radius: 10px;
            background: orange;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .div2 {
            width: 100px;
            height: 10px;
            background: #000;
            border-radius: 5px;
            position: relative;
            margin-top: 10px;
        }
        
        .box2 {
            width: 20px;
            height: 10px;
            border-radius: 5px;
            background: #fff;
            position: absolute;
            top: 0;
            left: 80px;
        }
    </style>
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <div>
        <div class="hearder">
            <i class="iconfont icon-ziyuan"></i>
        </div>
        <div class="body"></div>
        <video src="../01.mp4" controls></video>
        <div class="playqe">
            <button>播放</button>
            <input type="button" value="00:00:00">
            <input type="button" value="00:00:00">
            <button>暂停</button>
            <button class="clear">播放速度</button>
            <div class="query">
                <span>0.5x</span>
                <span>0.75x</span>
                <span>1x</span>
                <span>1.25x</span>
                <span>1.5x</span>
                <span>2x</span>
            </div>
            <button>加载</button>

            <button>重载</button>
            <button>小</button>
            <button>全屏</button>
        </div>
        <div class="div1">
            <div class="box1"></div>
        </div>
        <div class="div2">
            <div class="box2"></div>
        </div>
    </div>

    <script src="../jquery-3.2.1.js"></script>
    <script>
        var timer = null;
        $(function() {

            $(".hearder").click(function() {
                    $(".hearder").nextAll().show();
                })
                // 播放
            $(" .playqe button").eq(0).click(function() {
                $("video").get(0).play();
                nowTime();
                // console.log($('video')[0].duration);
                $(".playqe input").eq(1).val(changTime($('video')[0].duration));
                // 返回当前视频的长度以秒计算duration
                timer = setInterval(nowTime, 1000);
            })

            function nowTime() {
                $(".playqe input").eq(0).val(changTime($('video')[0].currentTime));
                当前走的秒除以总秒
                长减短除（ 当前走的秒除以总秒）
                var scale = video.currentTime / video.duration;
                box1.style.left = (div1.offsetWidth - box1.offsetWidth) * scale + "px";
            }
            // currentTime返回视频当前的位置单位秒，播放会跳跃到指定的位置
            // 格式化
            function changTime(time) {
                time = parseInt(time);
                var hour = zero(Math.floor(time / 3600));
                var minute = zero(Math.floor(time / 60));
                var second = zero(Math.floor(time % 60));
                return hour + ":" + minute + ":" + second
            }

            function zero(num) {
                if (num <= 9) {
                    return "0" + num
                } else {
                    return "" + num
                }
            }
            // 暂停
            $(".playqe button").eq(1).click(function() {
                $("video").get(0).pause();

            })
            $(".playqe .clear").click(function() {
                    $(".query").show();
                })
                //earch
                // $(".query").click(function() {
                //     $(" .query span").each(function() {
                //         $(this).css(
                //             "color", "red",
                //         ).
                //     })
                // })

            $(".query span").eq(0).click(function() {
                $("video").get(0).playbackRate = 0.5;
                $(".query span").eq(0).css(
                    "color", "red",
                )
            })
            $(".query span").eq(1).click(function() {
                $("video").get(0).playbackRate = 0.75;
                $(".query span").eq(1).css(
                    "color", "red",
                )
            })
            $(".query span").eq(2).click(function() {
                $("video").get(0).playbackRate = 1;
                $(".query span").eq(2).css(
                    "color", "red",
                )
            })
            $(".query span").eq(3).click(function() {
                $("video").get(0).playbackRate = 1.25;
                $(".query span").eq(3).css(
                    "color", "red",
                )
            })
            $(".query span").eq(4).click(function() {
                $("video").get(0).playbackRate = 1.5;
                $(".query span").eq(4).css(
                    "color", "red",
                )
            })
            $(".query span").eq(5).click(function() {
                $("video").get(0).playbackRate = 2;
                $(".query span").eq(5).css(
                    "color", "red",
                )
            })
        })
    </script>
</body>

</html>